<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue Shopping Cart</title>
</head>
<body>
    <div id="app" class="container mt-5">
        <h1>商品列表</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(product, index) in products" :key="index">
                    <td>{{ product.name }}</td>
                    <td>{{ product.price }}</td>
                    <td>
                        <button class="btn btn-primary" @click="addToCart(product)">加入购物车</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <h1>购物车</h1>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>小计</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in cart" :key="index">
                    <td>{{ item.product.name }}</td>
                    <td>{{ item.product.price }}</td>
                    <td>
                        <input type="number" v-model.number="item.quantity" @change="updateCartItem(item)">
                    </td>
                    <td>{{ item.subtotal }}</td>
                    <td>
                        <button class="btn btn-danger" @click="removeFromCart(index)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <span v-if="cart.length==0">购物车中暂无商品,请去购物!</span>
        <div class="mt-3">
            <p>购物车总数: {{ totalQuantity }}</p>
            <p>购物车总价: {{ totalPrice }}</p>
        </div>
    </div>
</body>
</html>
<script src="./js/2.7.14_dist_vue.js"></script>
<script>
    new Vue({
    el: '#app',
    data() {
        return {
            products: [
                { name: '娃哈哈', price: 3 },
                { name: '百事可乐', price: 4 },
                { name: '德芙', price: 10 }
            ],
            cart: []
        };
    },
    computed: {
        totalQuantity() {
            return this.cart.reduce((sum, item) => sum + item.quantity, 0);
        },
        totalPrice() {
            return this.cart.reduce((sum, item) => sum + item.subtotal, 0);
        }
    },
    methods: {
        addToCart(product) {
            const existingItem = this.cart.find(item => item.product.name === product.name);
            if (existingItem) {
                existingItem.quantity++;
                existingItem.subtotal = existingItem.quantity * existingItem.product.price;
            } else {
                this.cart.push({
                    product,
                    quantity: 1,
                    subtotal: product.price
                });
            }
        },
        removeFromCart(index) {
            this.cart.splice(index, 1);
        },
        updateCartItem(item) {
            item.subtotal = item.quantity * item.product.price;
        }
    }
});
</script>